<template>
  <el-dialog
    title="选择商品"
    :model-value="modelValue"
    @close="closed"
    width="1600px"
  >
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="120px"
    >
      <el-form-item label="商品名称" prop="goodsName">
        <el-input
          v-model="queryParams.goodsName"
          placeholder="请输入"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="商品分类" prop="goodsCategoryId">
        <el-tree-select
          style="width: 100%"
          clearable
          v-model="queryParams.goodsCategoryId"
          :data="categoryOptions"
          :props="{
            value: 'id',
            label: 'categoryName',
            children: 'children',
          }"
          value-key="id"
          placeholder="请选择"
          check-strictly
          @change="handleQuery"
        />
      </el-form-item>
      <el-form-item label="上架状态" prop="tag">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择"
          clearable
          :disabled="true"
          style="width: 100%"
          @change="handleQuery"
        >
          <el-option
            v-for="dict in goods_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="goodsList">
      <el-table-column label="商品名称" align="center" prop="goodsName" />
      <el-table-column label="商品简介" align="center" prop="goodsIntro" />
      <el-table-column
        label="商品分类"
        align="center"
        prop="goodsCategoryName"
      />
      <el-table-column label="商品图片" align="center" prop="goodsCoverImg">
        <template #default="scope">
          <ImagePreview
            :src="scope.row.goodsCoverImg"
            :height="40"
            :width="40"
          ></ImagePreview>
        </template>
      </el-table-column>
      <el-table-column label="商品售价" align="center" prop="sellingPrice" />
      <el-table-column label="商品库存数量" align="center" prop="stockNum" />
      <el-table-column label="上架状态" align="center" prop="status">
        <template #default="scope">
          <span v-if="scope.row.status === '0'">下架</span>
          <span v-if="scope.row.status === '1'">上架</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button link type="primary" @click="handleSelect(scope.row)"
            >选择</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page.sync="queryParams.pageNum"
      v-model:limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closed">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup name="SelectGoods">
import { listGoods } from "@/api/goods/goods";

import { listCategory } from "@/api/goods/goodsCategory";

const { proxy } = getCurrentInstance();

// 遮罩层
const loading = ref(true);
// 显示搜索条件
const showSearch = ref(true);
// 总条数
const total = ref(0);
// 商品表格数据
const goodsList = ref([]);
// 商品分类树数据
const categoryOptions = ref([]);
// 上下架状态
const goods_status = ref([
  {
    value: "0",
    label: "下架",
  },
  {
    value: "1",
    label: "上架",
  },
]);

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    goodsName: null,
    goodsCategoryId: null,
    status: '1',
  },
});

const { queryParams } = toRefs(data);

defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
});

const emits = defineEmits(["update:modelValue", "select"]);
/** 查询商品列表 */
const getList = () => {
  loading.value = true;
  listGoods(queryParams.value).then((response) => {
    goodsList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
};

/** 查询分类下拉树结构 */
function getCategoryTree() {
  categoryOptions.value = [];
  listCategory().then((response) => {
    const tree = proxy.handleTree(response.data, "id");
    categoryOptions.value = tree;
  });
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
  resetForm("queryForm");
  handleQuery();
};

const handleSelect = (row) => {
  emits("select", row);
  emits("update:modelValue", false);
};

/*** 关闭*/
const closed = () => {
  emits("update:modelValue", false);
};

getList();

getCategoryTree();
</script>
